$(function () {
    //判断用户是否登录
    var user = localStorage.getItem("user")
    if(user){
        $(".user").html(user)
        $(".login").remove()
        $(".register").remove()
        $(".logininfo").html('<a href="#" class="login-out">退出</a>')
        $(".user-login").remove()
        $(".user-register").remove()
        $(".login-register-box").html('<a href="javascript:;" class="user-register">我的订单</a><a href="javascript:;" class="user-register">我的账单</a>')
    }
    $(".logininfo").on("click",".login-out",function(){
        localStorage.removeItem("user")
        window.location.reload();
    })
    
    // 轮播图
    $(".show-area").mouseenter(function () {
        /*设置鼠标移动到整个show区域则左右按钮显示出来，否则不显示*/
        $(".button-right,.button-left").css({
            opacity: 1
        });

    });
    $(".show-area").mouseleave(function () {
        $(".button-right,.button-left").css({
            opacity: 0
        });
    });

    $(".show-area ul").hover(function () {
        clearInterval(timer)
    }, function () {
        timer = setInterval(function () {
            toRight();
        }, 4000);
    })
    var i = 0;
    var imgWidth = $(".show-area ul li").width();
    var clone = $(".show-area ul li").first().clone(true);
    $(".show-area ul").append(clone);
    var size = $(".show-area ul li").length; /*get 所有li的个数,只有length才是属性*/
    for (var j = 0; j < size - 1; j++) { //一开始循环添加按钮
        $(".indicator").append("<div></div>");
    }
    $(".indicator div").eq(i).addClass("onclick");
    $(".button-left").click(function () { //左按钮
        toLeft();
    });

    $(".button-right").click(function () { //右按钮
        toRight();
    });
    $(".indicator div").click(function () { //按钮指示器鼠标点击事件
        i = $(this).index();
        console.log(i)
        clearInterval(timer);
        $(".show-area ul").stop().animate({
            left: -i * imgWidth
        });
        $(this).addClass("onclick").siblings().removeClass("onclick");
    })
    $(".button-left,.button-right,.indicator div").mouseenter(function () { //两个方向按钮鼠标移出移入事件
        clearInterval(timer);
    }).mouseleave(function () {
        timer = setInterval(function () {
            toRight();
        }, 4000);
    });
    var timer = setInterval(function () { //定时器
        toRight();
    }, 4000);

    function toLeft() { //左按钮实现的函数        
        i--;
        if (i == -1) {
            $(".show-area ul").css({
                left: -(size - 1) * imgWidth
            });
            i = size - 2;
        }
        $(".show-area ul").animate({
            left: -i * imgWidth
        }, 200);
        $(".indicator div").eq(i).addClass("onclick").siblings().removeClass("onclick");

    }

    function toRight() { //右按钮的实现函数
        i++;
        if (i == size) {
            console.log("qq");
            $(".show-area ul").css({
                left: 0
            });
            i = 1;
        }
        $(".show-area ul").stop().animate({
            left: -i * imgWidth
        }, 200);
        if (i == size - 1) { //设置下面指示器的颜色索引
            $(".indicator div").eq(0).addClass("onclick").siblings().removeClass("onclick");

        } else {
            $(".indicator div").eq(i).addClass("onclick").siblings().removeClass("onclick");
        }
    }

    // 本周精选
    $(".weekly-selection-box").on("mouseover", ".item-box", function (e) {
        e.stopPropagation()
        $(this).removeClass("show").addClass("hide").siblings(".weekly-item-pic").removeClass("hide").addClass("animated show fadeInLeft")
        $(this).closest(".weekly-item").siblings(".weekly-item").find(".item-box.hide").removeClass("animated hide").siblings(".weekly-item-pic").removeClass("animated show").addClass("hide")
    })
    //商品列表渲染
    function datalist(type,k) {
        var html = ""
        
        for (var i = 0; i < 10; i++) {

            html += `
            <div class="aRight-item">
            <a href="./detail.html?id=${type[i].Id}" target="_blank">
                <div class="itemImg">
                    <img src="${type[i].img_url}" alt="">
                </div>
                <h4 class="desc" title="${type[i].t_desc}">${type[i].t_desc}</h4>
                <p class="price">${type[i].price}</p>
            </a>
            </div>
        `
        }
        console.log(html)
        $(".accessories").eq(k).find(".aRight").html(html)
    }
    datalist(xzbg,0)
    datalist(jskf,1)
    datalist(swbx,2)
    datalist(txcl,3)
    datalist(wspj,4)
    // 楼梯导航
    var Page = (function () {
        var pos = [$('.part1'), $('.part2'), $('.part3'), $('.part4'), $('.part5'), $('.part6'), $('.part7'), $('.part8')]
        nav = $('.floor-direct li')
        for (var i = 0; i < pos.length; i++) {
            pos[i] = pos[i].offset().top - 350;
        }
        $(window).on('scroll', function () {
            var t = $(this).scrollTop(); //获得滚动条高度

            if (t > 500) {
                $(".floor-direct").show();
            } else {
                $(".floor-direct").hide();
            }
            if (t > pos[pos.length -1]) {
                nav.eq(pos.length - 1).addClass("floor-direct-active").siblings().removeClass("floor-direct-active");
            } else {
                for (var i = 0; i < pos.length - 1; i++) {
                    // console.log(i)
                    if (t >= pos[i] && t < pos[i + 1]) {
                        nav.eq(i).addClass("floor-direct-active").siblings().removeClass("floor-direct-active");
                    }
                }
            }
        });
        nav.on('click', function () {
            // console.log($(this).index())
            var i = $(this).index(); //点击nav，获取点击的index
            $('html, body').animate({
                'scrollTop': pos[$(this).index()] + 280
            }, 200);
        });
    })();
})
